<template>
  <div id="userDetail">
    <Title
      :show-btn="false"
      :isShowBack="false"
      btn-name="保存"
      :name="fromData.id ? '应用编辑' : '新增应用'"
      @btnClick="saveForm('updataForm')"
    />
    <div class="basicBox">
      <el-form
        ref="updataForm"
        :rules="rules"
        label-position="right"
        label-width="80px"
        :model="fromData"
        size="mini"
        class="search_box"
      >
        <div class="row">
          <el-form-item label="应用名称" prop="applicationName">
            <el-input
              v-model.trim="fromData.applicationName"
              maxlength="10"
              :validate-event="false"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="应用分类" prop="categoryId">
            <el-select v-model="fromData.categoryId" placeholder="请选择">
              <el-option
                v-for="dict in categoryList"
                :key="dict.id"
                :label="dict.categoryName"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="场景描述" prop="sceneDesc">
            <el-input
              v-model.trim="fromData.sceneDesc"
              :validate-event="false"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="IP地址" prop="address">
            <el-input
              v-model.trim="fromData.address"
              :validate-event="false"
              placeholder="请输入"
            />
          </el-form-item>
          <!-- 除了联系人,电话,图标,其他都必填 -->
          <el-form-item class="labelText" label="联系人" prop="contactName">
            <el-input
              v-model.trim="fromData.contactName"
              :validate-event="false"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="联系电话" prop="phoneNum">
            <el-input
              v-model.trim="fromData.phoneNum"
              :validate-event="false"
              maxlength="11"
              show-word-limit
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="所属单位" prop="department">
            <el-input
              v-model.trim="fromData.department"
              :validate-event="false"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item class="oneRow" prop="orderNum" label="排序号">
            <el-input
              v-model.trim="fromData.orderNum"
              placeholder="请输入"
              type="number"
              :validate-event="false"
              @keydown.native="changeNumber"
            />
          </el-form-item>
          <el-form-item label="是否启用" prop="deleteFlag">
            <el-radio-group v-model="fromData.deleteFlag">
              <el-radio
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.value"
                >{{ dict.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="应用图标" class="labelText" prop="status">
            <div style="display:flex">
               <img v-if="previewUrl || fromData.iconUrl" :src="previewUrl || fromData.iconUrl" class="previewImg" alt="" />
            <upload @upload="imgUpload"></upload>
            </div>
           
          </el-form-item>
        </div>
        <div class="btBox">
          <el-button size="mini" class="reset" @click="back()">取消</el-button>
          <el-button size="mini" type="primary" @click="saveForm('updataForm')"
            >保存</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import upload from "@/components/UploadImg/index.vue";
import {
  uploadImg,
} from "@/api/system/application_management";
import Title from "@/components/ShareTitle";
export default {
  components: {
    Title,
    upload,
  },
  props: {
    fromData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    categoryList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      previewUrl: undefined,
      statusOptions: [
          {
          value: 0,
          label: "启用",
        },
        {
          value: 1,
          label: "停用",
        },
      ],
      count: 0,
      input: "",
      activeMenu: "",
      isClick: 1,
      rules: {
        applicationName: [
          { required: true, message: "应用名称不能为空", trigger: "blur" },
        ],
        sceneDesc: [
          { required: true, message: "场景描述不能为空", trigger: "blur" },
        ],
        categoryId: [
          { required: true, message: "请选择应用分类", trigger: "change" },
        ],
        orderNum: [
          { required: true, message: "排序号不能为空", trigger: "blur" },
        ],
        address: [
          { required: true, message: "IP地址不能为空", trigger: "blur" },
        ],
        department: [
          { required: true, message: "所属单位不能为空", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 点击保存
    saveForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.fromData.phoneNum) {
            if (!/^1[3456789]\d{9}$/.test(this.fromData.phoneNum)) {
              this.$message.error("请输入正确的手机号");
              return false;
            }
          }
          if (this.imgFiles) {
            const form = new FormData();
            form.append("file", this.imgFiles);
            var {data} = await uploadImg(form)
            this.fromData.iconUrl = data.url;
          }
          if (this.fromData.id) {
            this.$emit("submit", JSON.stringify(this.fromData));
          } else {
            this.$emit("submit",JSON.stringify(this.fromData));
          }
        } else {
          return false;
        }
      });
    },
    imgUpload(e) {
      this.imgFiles = e.files[0];
      this.previewUrl = e.localUrls[0];
    },
    changeNumber(e) {
      // 不允许输入'e'和'.'以及'-'
      if (e.key === "e" || e.key === "." || e.key === "-" || e.key === "E") {
        e.returnValue = false;
        return false;
      }
    },
    back() {
      // this.closeView();
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
#userDetail {
  padding: 0px 20px 0px 20px;
}
.el-card__body {
  display: flex;
  flex-direction: column;
}
.basicBox {
  margin-top: 20px;
  .title {
    text-align: left;
    font-size: 16px;
    color: #222222;
    margin-bottom: 10px;
  }
  .search_box {
    .row {
      display: flex;
      flex-wrap: wrap;
    }
    .el-form-item--mini.el-form-item {
      margin-right: 40px;
    }
    ::v-deep.el-form-item--mini .el-form-item__label {
      text-align: left !important;
      color: #5d6470;
      font-size: 14px;
      font-weight: 400;
    }
    ::v-deep.el-form-item--mini .el-form-item__content {
      width: 220px;
    }
    ::v-deep.el-select > .el-input {
      width: 220px;
    }
    ::v-deep.el-input.is-disabled .el-input__inner {
      color: #222222;
    }
  }
}
::v-deep.oneRow .el-form-item__label {
  line-height: 20px !important;
}
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.labelText {
  ::v-deep.el-form-item__label {
    &::before {
      content: "*";
      color: #ff4949;
      margin-right: 4px;
      opacity: 0;
    }
  }
}
.btBox {
  text-align: right;
  margin-top: 10px;
}
.reset {
  background-color: #f3f4f6;
  color: #222222;
  border: none;
  height: 30px;
}
.reset.el-button:hover,
.reset.el-button:focus {
  background-color: #f3f4f6;
  color: #222222;
  border: none;
}
.previewImg {
  width: 104px;
  margin-right: 20px;
}
</style>
